
<!doctype html>
<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
	<script src="http://lib.sinaapp.com/js/jquery/1.9.1/jquery-1.9.1.min.js" type="text/javascript"></script>
	<style type="text/css">
		  .imgBox img{
		     width: 40px;
		     height: 40px;
		     padding: 20px;
		     border: 20px solid orange;
		     margin: 10px;
		  }
		  #contentBox{
		     -moz-box-sizing: content-box;
		     -webkit-box-sizing: content-box;
		     -o-box-sizing: content-box;
		     -ms-box-sizing: content-box;
		     box-sizing: content-box; 
		  }

		  #borderBox{
		     -moz-box-sizing: border-box;
		     -webkit-box-sizing: border-box;
		     -o-box-sizing: border-box;
		     -ms-box-sizing: border-box;
		     box-sizing: border-box;
		  }

		  #paddingBox{
		     -moz-box-sizing: padding-box;
		     -webkit-box-sizing: padding-box;
		     -o-box-sizing: padding-box;
		     -ms-box-sizing: padding-box;
		      box-sizing:padding-box;
		  }

			</style>
	<title>jQuery.width</title>
</head>
<body>

   <div class="imgBox" > <img id="contentBox" src="" alt="" />contentBox </div>
   <div class="imgBox" > <img id="borderBox" src="" alt="" />borderBox </div>
   <div class="imgBox" > <img id="paddingBox" src="" alt="" />paddingBox </div>
   <ul></ul>
	
<script>

	var contentBox = document.getElementById('contentBox');
	var borderBox  = document.getElementById('borderBox');
	var paddingBox = document.getElementById('paddingBox');

	$('body').append('<li>contentBox:' + contentBox.offsetWidth + '</li>\n <li>borderBox:' + borderBox.offsetWidth + '</li>\n <li>paddingBox:' + paddingBox.offsetWidth + '</li>')


</script>
</body>
</html>